<!--vue模板-->
<template>
  <div>
    <div>
      <!-- 搜索 -->

      <!--表格数据-->
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        border
        row-key="id"
      >
        <el-table-column
          label="序号"
          type="index"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column prop="cname" label="客户名称" header-align="center" />
        <el-table-column
          prop="pprice"
          label="客户报价"
          width="180"
          header-align="center"
        />
        <el-table-column
          prop="product"
          label="产品"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="num"
          label="数量"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="pname"
          label="供应商"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop="pprice"
          label="供应商报价"
          width="100"
          header-align="center"
        />
        <el-table-column
          prop="hname"
          label="货代"
          width="150"
          header-align="center"
        />
        <el-table-column
          prop="hprice"
          label="货代报价"
          width="150"
          header-align="center"
        />
        <el-table-column label="利润" width="150" header-align="center">
          <template #default="{ row }">
            {{ row.cprice - row.pprice - row.hprice }}
          </template>
        </el-table-column>
        <el-table-column
          v-if="user.roleName == '管理员'"
          prop="sname"
          label="审核人"
          width="150"
          header-align="center"
        />

        <el-table-column
          label="状态"
          width="180"
          header-align="center"
          align="center"
        >
          <template #default="{ row }">
            <div v-if="user.roleName == '管理员'">
              <div v-if="row.status == 0">
                <el-button type="primary" size="small" @click="pass(row.id)"
                  >通过</el-button
                >
                <el-button type="primary" size="small" @click="unpass(row.id)"
                  >驳回</el-button
                >
              </div>
              <div v-if="row.status == 1">已通过</div>
              <div v-if="row.status == 2">已驳回</div>
            </div>
            <div v-if="user.roleName == '销售'">
              <div v-if="row.status == 0">待审核</div>
              <div v-if="row.status == 1">
                通过
                <el-button
                  type="primary"
                  size="small"
                  @click="go(row.cname, row.product)"
                  >下订单</el-button
                >
              </div>
              <div v-if="row.status == 2">
                驳回
                <el-button type="primary" size="small" @click="look(row.id)"
                  >查看原因</el-button
                >
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Resultadd
      ref="resultadd"
      :visible="isShow"
      @close="isShow = false"
      @refresh="init()"
    />
    <Resultlook
      ref="resultlook"
      :visible="isShow2"
      @close="isShow2 = false"
      @refresh="init()"
    />
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import { ref, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import {
  query,
  save,
  updateStatus,
  updateResult,
  queryResult
} from "@/api/audit.js";
import { getUser } from "@/utils/session.js";
import { useRouter } from "vue-router";

import Resultadd from "./Resultadd.vue";
import Resultlook from "./Resultlook.vue";

const router = useRouter();
let user;
//表格数据
const tableData = ref([]);
const resultadd = ref(null);
const resultlook = ref(null);
//是否显示新增用户
const isShow = ref(false);
const isShow2 = ref(false);
const querycode = ref("");

function pass(id) {
  let a = {
    id: id,
    status: 1,
    sname: ""
  };
  a.sname = user.account;
  console.log(a);

  updateStatus(a);
  window.location.reload();
}

function unpass(id) {
  isShow.value = true;
  resultadd.value.init(id);
}
function look(id) {
  isShow2.value = true;
  resultlook.value.init(id);
}
function go(name, product) {
  // router.push("/order/createorder");
  router.push({ path: "/order/createorder", mes: { name, product } });
}
//方法
async function init() {
  let res = await query();
  if (res.code == 200) {
    tableData.value = res.data;
  }
}

async function chg(id, status) {
  let res = await changeDeptStatus(id, status);
  if (res.code == 200) {
    ElMessage({
      message: "修改成功",
      type: "success"
    });
    init(); //重新查询数据
  }
}

//生命周期钩子
onBeforeMount(() => {
  init();
  user = getUser();
  console.log(user);
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
.toolbar {
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  padding-left: 20px;
}
</style>
